<template>
    <div :class="['side-bar-wrapper', showSide ? 'show_side_bg' : 'hide_side_bg']">
        <div v-if="showSide" class="left-wrapper">
            <slot name="left"></slot>
        </div>
        <div class="center"></div>
        <div v-if="showSide" class="right-wrapper">
            <slot name="right"></slot>
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useStore } from '@/stores';
const store = useStore();

const showSide = computed(() => store.showSidebar)
</script>
<style scoped lang="scss">
.side-bar-wrapper {
    width: 100%;
    height: 94.68%;
    position: absolute;
    left: 0;
    top: 5.32%;
    pointer-events: none;
    display: flex;
    flex-direction: row;

    .left-wrapper {
        height: 100%;
        width: 22.16%;
        padding-left: 58px;
        padding-bottom: 20px;
        padding-top: 0.5rem;
        display: flex;
        flex-direction: column;
        pointer-events: auto;

    }

    .center {
        position: relative;
        pointer-events: none;
        flex: 1;
    }

    .right-wrapper {
        height: 100%;
        width: 22.16%;
        padding-right: 58px;
        padding-bottom: 20px;
        padding-top: 0.5rem;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
    }
}

.show_side_bg {
    background:
        linear-gradient(to bottom,
            rgba(5, 6, 9, 0.5),
            rgba(5, 6, 9, 0) 20%,
            rgba(5, 6, 9, 0) 80%,
            rgba(5, 6, 9, 0.5) 100%),
        linear-gradient(to right,
            #0D1927 0%,
            rgba(5, 6, 9, 0.4) 22.16%,
            rgba(5, 6, 9, 0) 32.16%,
            rgba(5, 6, 9, 0) 68.84%,
            rgba(5, 6, 9, 0.4) 77.84%,
            #0D1927 100%);
    // background:
    //     linear-gradient(to bottom,
    //         rgba(5, 6, 9, 0.5),
    //         rgba(5, 6, 9, 0) 10%,
    //         rgba(5, 6, 9, 0) 90%,
    //         rgba(5, 6, 9, 0.5) 100%),
    //     linear-gradient(to right,
    //         #0D1927 0%,
    //         rgba(5, 6, 9, 0) 35%,
    //         rgba(5, 6, 9, 0) 65%,
    //         #0D1927 100%);
}

.hide_side_bg {
    background:
        linear-gradient(to bottom,
            rgba(5, 6, 9, 0.4),
            rgba(5, 6, 9, 0) 20%,
            rgba(5, 6, 9, 0) 80%,
            rgba(5, 6, 9, 0.4) 100%),
        linear-gradient(to right,
            rgba(5, 6, 9, 0.4) 0%,
            rgba(5, 6, 9, 0) 10%,
            rgba(5, 6, 9, 0) 90%,
            rgba(5, 6, 9, 0.4) 100%);
}
</style>